<script setup>
import { ref } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
const tabList = ref([])
</script>
<template>
	<div class="customer-detail-statistic">
		<el-table :data="tabList" style="width: 100%">
			<el-table-column fixed label="群名称" width="180">
				<template #default="scope">
					<div class="owner-name">
						<img
							class="owner-img"
							src="../../../../../assets/img/img/avatar-room-default.67bead38e751.svg"
							alt=""
						/>
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="群主" width="180">
				<template #default="scope">
					<div class="owner-name gray-broder">
						<el-icon><UserFilled class="people-icon" /></el-icon>
						<span style="margin-left: 5px">{{ scope.row.owner.name }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column property="member_count" label="群人数" width="120" />
			<el-table-column property="today_total_user_count" label="客户入群时间" width="120" />
			<el-table-column property="today_increase_user_count" label="状态" width="120" />
			<el-table-column property="create_time" label="操作" />
			<template #empty>
				<div class="empty-box">
					<img
						class="empty-img"
						src="../../../../../assets/img/img/list-empty.499dbb25961c.png"
						style="width: 136px"
						alt=""
					/>
					<div class="empty-description">还没有已加入的群聊哦~</div>
				</div>
			</template>
		</el-table>
	</div>
</template>
<style lang="scss" scoped>
.customer-detail-statistic {
	position: relative;
	width: 100%;
	height: 392px;
	padding: 0 24px;
	.record-seat-tip-wrap {
		position: absolute;
		top: 12px;
		left: 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48px);
		min-height: 36px;
		padding: 8px 16px;
		margin: 0;
		background-color: #f1f9ff;
		color: #595959;
		font-size: 14px;
		.ame-alert-icon {
			font-size: 15px;
			margin-right: 8px;
			color: #1890ff;
		}
		.tip-text {
			display: flex;
			align-items: center;
		}
	}
	.empty-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		.empty-description {
			margin-top: 16px;
			font-size: 14px;
			color: #000000a6;
		}
	}
}
</style>
